<template>
	<div class="hello">
		<button @click="increase">增加</button>
		<button @click="decrease">减少</button>
	</div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex';
import {INCREMENT,DECREMENT} from '@/store/mutation-type.js'
export default {
	name: 'HelloWorld',
	data() {
		return {
			list:[]
		};
	},
	methods: {
		// ...mapMutations(['increment', 'decrement']),
		...mapMutations([INCREMENT, DECREMENT]),
		...mapActions(['myIncrease', 'myDecrease']),
		increase() {
			// this.$store.state.count ++  //不推荐
			// this.increment
			// this.$store.commit('increment')
			this.$store.commit(INCREMENT,2)
			// const products = this.myIncrease({
			// 	id:2
			// });
			// this.list = products
		},
		decrease() {
			// this.$store.state.count --  //不推荐
			// this.decrement
			// this.$store.commit('decrement')
			this.$store.commit(DECREMENT,3)
			// this.myDecrease();
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
